import React, { useState, useEffect } from 'react';
import { Button, Spin } from 'antd';
import { TjIcon, TjSlideSelect } from '@/tjComponents';
import { iconAiBlue, iconAiGre } from '@/assets/icon/index.js';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import styles from './index.less';
import OpenAiModal from '../OpenAiModal';
import { connect } from 'umi';
import { TjChart } from '@/pages/ETrade/components';
import { TRDefault } from '#/components';

const PowerPrediction = (props) => {
  const {
    dispatch,
    dataList,
    smoothStatus,
    quoteStationId,
    store,
    searchForm = {},
    openAi,
    predictionAdjustmentLoading,
    predictionAdjustment,
  } = props;
  const [aiVisible, setAiVisible] = useState(false);

  const changeStore = (v) => {
    dispatch({
      type: 'shortTermForecastingRedesignV2/setState',
      payload: {
        store: v,
      },
    });
  };

  useEffect(() => {}, [store]);

  const queryPowerAdjust = () => {
    const params = {
      markDate: searchForm.calendarDate,
      stationId: searchForm.stationId,
      marketId: searchForm.marketId,
      saveType: searchForm.saveType,
      dataList: dataList,
      store: store,
      quoteStationId: quoteStationId ?? null,
      smoothStatus: smoothStatus ? smoothStatus : null,
      // 数据来源(1:HDPSS,2:HDPS,3:LP,4:PFDS,5:启用AI,6:人工)
      dataFrom: openAi ? 5 : 6, // （8, "-启用AI" \ 9, "-人工"）
    };
    // 获取功率预测调整
    dispatch({
      type: 'shortTermForecastingRedesignV2/getPowerPredictionAdjustment',
      payload: params,
    });
  };

  useEffect(() => {
    dispatch({
      type: 'shortTermForecastingRedesignV2/getAiAdjustmentChartData',
      payload: {
        dataList: dataList,
        markDate: searchForm.calendarDate,
        stationId: searchForm.stationId,
        store: store,
        smoothStatus: smoothStatus,
        quoteStationId: quoteStationId,
      },
    });
  }, [store]);

  useEffect(() => {
    queryPowerAdjust();
  }, [store]);

  const handleOpenAiModal = () => {
    setAiVisible(true);
  };

  return (
    <Spin spinning={predictionAdjustmentLoading}>
      <div className={styles.power_prediction}>
        <div className={styles.title}>
          <div className={styles.name}>
            功率预测及调整模拟
            <div className={styles.tips}>
              <ExclamationCircleOutlined className={styles.icon} />
              功率预测滚动更新，比例申报调整会依据申报时最新预测进行，本数据仅做参考测算
            </div>
          </div>
          <div className={styles.options}>
            <Button
              type="link"
              onClick={handleOpenAiModal}
              icon={<TjIcon dark={iconAiBlue} gre={iconAiGre} className={styles.icon} />}
            >
              AI策略
            </Button>
            <TjSlideSelect
              value={store}
              onChange={changeStore}
              items={[
                { label: '考虑储能', value: 1 },
                { label: '不考虑储能', value: 0 },
              ]}
            />
          </div>
        </div>
        <div className={styles.chart_box}>
          <div className={styles.chart}>
            {Object.keys(predictionAdjustment)?.length === 0 ? (
              <TRDefault type={'emptysm'} message={'暂无数据'} />
            ) : (
              <TjChart option={predictionAdjustment} group={'B'} />
            )}
          </div>
        </div>
        <OpenAiModal
          visible={aiVisible}
          onCancel={() => {
            setAiVisible(false);
          }}
        />
      </div>
    </Spin>
  );
};

export default connect(({ shortTermForecastingRedesignV2 }) => ({
  searchForm: shortTermForecastingRedesignV2.searchForm,
  dataList: shortTermForecastingRedesignV2.dataList,
  smoothStatus: shortTermForecastingRedesignV2.smoothStatus,
  quoteStationId: shortTermForecastingRedesignV2.quoteStationId,
  store: shortTermForecastingRedesignV2.store,
  openAi: shortTermForecastingRedesignV2.openAi,
  predictionAdjustmentLoading: shortTermForecastingRedesignV2.predictionAdjustmentLoading,
  predictionAdjustment: shortTermForecastingRedesignV2.predictionAdjustment,
}))(PowerPrediction);
